<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>发布帖子</title>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <link href="css/bootstrap.css" rel='stylesheet' type='text/css'/>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:700,700italic,800,300,300italic,400italic,400,600,600italic'
          rel='stylesheet' type='text/css'>
    <!--Custom-Theme-files-->
    <link href="css/style.css" rel='stylesheet' type='text/css'/>
    <script src="js/jquery.min.js"></script>
    <!--/script-->
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $(".scroll").click(function (event) {
                event.preventDefault();
                $('html,body').animate({scrollTop: $(this.hash).offset().top}, 900);
            });
        });
    </script>
    <style type="text/css">
        .full{
            width: 600px;
            height: 400px;
            border: solid 1px orangered;
            margin: 40px auto;
            position: center;
        }
        span{
            font-weight: bolder;
        }
        .text-div{
            margin-top: 8px;
        }
        input{
            width: 400px;
            height:30px;
        }
       #submitBtn{
            font-weight: bolder;
            background: orangered;
            width: 100px;
            margin-left: 150px;
        }
        #picBtn{
            font-weight: bolder;
            background: orangered;
            width: 100px;
        }
    </style>
</head>
<body>
<br/>
<div class="full" >
    <h3>发布新帖</h3><br>
    <div class="col-md-9 main">
        <form  action="UserAddNewsServlet" enctype="multipart/form-data" name="form1">
            <div class="text-div">
                <span>所属版块:</span>
                <select name="blockid" id="block" onchange="firstSel()">
                    <option value="0">请选择版块</option>
                    <c:forEach items="${blockList}" var="b">
                        <option value="${b.blockid}">${b.blockname}</option>
                    </c:forEach>
                </select>
                <select name="bitemid" id="blockItem">
                    <option value="0">请选择类别</option>
                </select>
            </div>
            <div class="text-div">
                <span>帖子标题:</span> <input type="text" name="title">
            </div>
            <div class="text-div">
                <span>主要内容:</span> <input type="text" name="context">
            </div>
            <div class="text-div">
                <span>插入图片:</span>
                <input type="file" name="pic" id="picpath" style="display:none;" onChange="document.form1.path.value=this.value">
                <input name="path" readonly style="width:300px" value="请上传照片">
                <input type="button" id="picBtn" value="上传照片" onclick="document.form1.pic.click()">
            </div>
            <div class="text-div">
                <input type="submit" id="submitBtn" value="发布新帖" style="width: 200px;margin-left: 100px">
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
        function firstSel() {//如果第一个下拉列表的值改变则调用此方法
            var blockid = $("#block").val();//得到第一个下拉列表的值
            if (blockid != null && blockid != "" && -1 != blockid) {
                $.ajax({
                    type: 'POST',
                    url: 'TwoLevelBlockServlet',
                    dataType: 'JSON',
                    data: {
                        blockid:$("#block").val()
                    },
                    success: function (data) {
                        console.log(data);
                        if (data != null) {
                            var option;
                            $.each(data, function (index, obj) {
                                option += "<option value='" + obj.bitemid + "'>" + obj.bitemname + "</option>";
                                $("#blockItem").value=obj.bitemid;
                            });
                            $("#blockItem").html(option);//将循环拼接的字符串插入第二个下拉列表
                            $("#blockItem").show();//把第二个下拉列表展示
                        }
                    }
                });
            }
        }
</script>
</body>
</html>
